<template>
  <div class="hello">
    
   <div id="myChart" style="width: 1760px; height: 660px;"></div>
  </div>
</template>

<script>
export default {
data(){
 return {}
}, 
 mounted(){
 this.myChart() //函数调用
 },
 methods:{
   myChart(){
     let myChart= this.$echarts.init(document.getElementById('myChart'));
     // var colors = ['rgba(15,115,255,0.6)', 'rgba(15,235,255,0.6)'];
     var data1 = [600000, 250000, 170000, 360000, 240000, 240000,690000, 250000, 170000, 360000, 240000,608000, 250000, 170000, 360000, 240000,126458];
     var data2 = [187444, 1477776,1477776,1477776, 129777, 174000,245444,187444, 1477776, 129777, 174000,245444187444, 1477776, 129777, 174000,245444,6666666];
     var xData = ['国网北京市电力公司','国网天津市电力公司','国网河北省电力有限公司','国网翼北电力有限公司','国网山西电力公司','国网山东电力公司','国网上海电力公司','国网江苏电力公司','国网浙江电力公司','国网安徽电力公司','国网福建电力公司','国网湖北电力公司','国网湖南电力公司','国网河南电力公司','国网江西电力公司','国网辽宁电力公司','国网吉林电力公司','国网黑龙江电力公司','国网蒙东电力公司','国网陕西电力公司','国网甘肃电力公司','国网青海电力公司','国网宁夏电力公司','国网新疆电力公司','国网四川电力公司','国网重庆电力公司','国网西藏电力公司']
     myChart.setOption({
  backgroundColor:'#fff',
  tooltip: {
   trigger: "axis",
   // formatter: '{b}<br/>{a1}-违规率:{c1}<br/>{a0}-违规率:{c0}',
   axisPointer: {
    type: "shadow",
    textStyle: {
    color: "#000000"
    }
   },
  },
  grid: {
   top: '8%',
   right: '2%',
   left:"5%",
   bottom: '10%'
  },
  legend: {
   data: ['总部管理', '各单位管理'],
   align: 'left',
   left: '80%',
   top: '4%',
   textStyle:{
    color:'#000000'
   }
  },
  calculable: true,
  xAxis: [{
   type: "category",
   data: xData,
   axisLine: {
   lineStyle: {
    color: 'rgba(255,255,255,0.1)'
   },
   },
   axisLabel: {
   show: true,
    fontSize: 12,
   interval:0,
   textStyle: {
    color: '#000000'
   },
    formatter: function (params) {
        var newParamsName = '' // 最终拼接成的字符串
        var paramsNameNumber = params.length // 实际标签的个数
        var provideNumber = 4 // 每行能显示的字的个数
        var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
        // 条件等同于rowNumber>1
        if (paramsNameNumber > provideNumber) {
          /** 循环每一行,p表示行 */
          for (var p = 0; p < rowNumber; p++) {
            var tempStr = "" // 表示每一次截取的字符串
            var start = p * provideNumber // 开始截取的位置
            var end = start + provideNumber // 结束截取的位置
            // 此处特殊处理最后一行的索引值
            if (p == rowNumber - 1) {
              tempStr = params.substring(start, paramsNameNumber)
            } else {
              // 每一次拼接字符串并换行
              tempStr = params.substring(start, end) + "\n"
            }
            newParamsName += tempStr // 最终拼成的字符串
          }
        } else {
          // 将旧标签的值赋给新标签
          newParamsName = params
        }
        return newParamsName
      }

   },
  }],

  yAxis: {
   type: 'value',
   // name:'单位:(人次 )',
   min: 60000,
   max: 1000000,
   interval: 40000,
   axisLine: {
   lineStyle: {
    color: 'rgba(255,255,255,0.1)'
   }
   },
   splitLine: {
   lineStyle: {
    type: 'dashed',
   },
   show:false
   },
   axisLabel: {
   show: true,
   textStyle: {
    color: '#000000'
   }
   },
  },
  series: [{
   name: '总部管理',
   type: 'bar',
   // color: colors[0],
   data: data1,
   itemStyle:{
    normal: {
    //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
    //此处的箭头函数是为了不改变this的指向
    color: '#13dbf3'
    // (params) => {
    //  var index = params.dataIndex;
    //  var colorList = [
    //  // 渐变颜色的色值和透明度
    //  //双柱状图渐变的 第一个柱子的渐变色['rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)'],
    //  ['rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)'] 
      
    //  ];
    //  if(params.dataIndex >= colorList.length){
    //  index=params.dataIndex-colorList.length;
    //  }
    
    // }
    }
   }
  },
  {
   name: '各单位管理',
   type: 'bar',
   // color: colors[1],
   data: data2,
   itemStyle:{
    normal: {
    //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
    color: '#3082e9'
    // (params) => {
    //  var index = params.dataIndex;
    //  var colorList = [
    //  // 渐变颜色的色值和透明度
    //  //双柱状图渐变的 渐变第二个柱子的渐变色['rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)'],
    //  ['rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)'] 
    //  ];
     //方法一:
     //不使用箭头函数的写法改变渐变色
     // return {
     // colorStops: [{
     //  offset: 0,
     //  color: colorList[0][index] // 0% 处的颜色
     // },{
     //  offset:0.6,
     //  color: colorList[1][index] // 100% 处的颜色
     // }]
     // }
     //方法二:使用箭头函数的写法 改变双柱状图的渐变颜色
    //  return new this.$echarts.graphic.LinearGradient(0,0,0,1,[
    //  {offset: 0.2, color: colorList[1][index]},
    //  {offset: 1, color: colorList[0][index]}
    //  ])
    // }
    }
   }
  }]
  })
 }
 }
   }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
